<template>
  <div class="user-auth">
    <el-form class="query-form" inline size="small" ref="queryForm">
      <el-form-item label="渠道" prop="channel_id" class="big-query">
        <el-cascader
          v-model="queryParams.channel_id"
          :options="channelOptions"
          :props="{ multiple: true,emitPath:false }"
          style="width: 240px"
          collapse-tags
          :show-all-levels="false"
          clearable
          filterable
          @change="handleQuery"></el-cascader>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select v-model="queryParams.status" placeholder="请选择" @change="handleQuery">
          <el-option label="全部" :value="null" />
          <el-option label="未提交" :value="0" />
          <el-option label="进行中" :value="1" />
          <el-option label="已结束" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="面值">
        <el-input-number v-model="queryParams.amount_start"
          placeholder="最低"
          size="small"
          :precision="2"
          style="width: 83px"/>
        -
        <el-input-number v-model="queryParams.amount_stop"
          placeholder="最高"
          size="small"
          :precision="2"
          style="width: 83px"/>
      </el-form-item>
      <el-form-item class="big-query" label="关键词" prop="keyword">
        <el-input v-model="queryParams.keyword"
          placeholder="请输入券名或描述"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
          @clear="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
          size="small"
          @click="handleQuery">搜索</el-button>
        <el-button size="small " @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary"
      icon="el-icon-plus"
      style="margin-bottom:10px"
      size="small"
      @click="handleAdd">新增</el-button>
    <el-table v-loading="loading" :data="dataList" style="width:100%">
      <el-table-column label="ID" min-width="100" prop="id"/>
      <el-table-column label="优惠券名称" min-width="100" prop="name"/>
      <el-table-column label="面值" min-width="80">
        <template slot-scope="scope">
          ￥{{scope.row.amount|formatMoney}}
        </template>
      </el-table-column>
      <el-table-column label="描述" min-width="180" prop="describe" show-overflow-tooltip/>
      <el-table-column label="状态" min-width="80">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status===0? 'info' : scope.row.status===2?'danger':''">{{ scope.row.status|filterStatus }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="handleState(scope.row,1)" v-if="scope.row.status===0">提交</el-button>
          <el-button size="small" type="text" @click="handleDetail(scope.row)">查看</el-button>
          <el-button size="small" type="text" @click="handleEdit(scope.row)" v-if="scope.row.status===0">编辑</el-button>
          <el-button size="small" type="text" @click="handleRecord(scope.row)" v-if="scope.row.status!==0">统计</el-button>
          <el-button size="small" type="text" @click="handleState(scope.row,2)" v-if="scope.row.status===1">停止</el-button>
          <el-button size="small" type="text" @click="handleDel(scope.row)" v-if="scope.row.status!==1">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.page_size" @pagination="getList"></pagination>
    <detail-dialog :visible.sync="detailDialogShow"
      :channelOptions="channelOptions"
      :detailObj="detailObj"
      :isDetail="isDetail"
      @listChange="getList"/>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import detailDialog from './components/detail.vue'
import { getCouponList, updateCouponStatus, delCoupon } from '@/api/coupon'
import { getChannelByAppId } from '@/api/system/channel'
export default {
  name: 'CouponList',
  components: {
    detailDialog
  },
  data () {
    return {
      saveLoging: false,
      openAuth: false,
      loading: false,
      queryParams: {
        channel_id: [],
        amount_start: undefined,
        amount_stop: undefined,
        keyword: '',
        status: null,
        page: 1,
        page_size: 10
      },
      channelOptions: [],
      dataList: [],
      total: 0,
      detailDialogShow: false,
      isDetail: false,
      detailObj: {}
    }
  },
  computed: {
    ...mapGetters('zcsd-core', ['permission_projectList'])
  },
  filters: {
    filterStatus (val) {
      const arr = ['未提交', '进行中', '已结束']
      return arr[val]
    }
  },
  created () {
    const list = this.permission_projectList.map(item => item.app_id)
    this.getList()
    getChannelByAppId({ app_ids: list.join(',') }).then(res => {
      const channelList = res.data.list
      for (const item of this.permission_projectList) {
        item.label = item.name
        item.value = parseInt(item.app_id)
        const list = channelList.filter(item1 => item1.app_id === item.value)
        item.children = list.map(item => ({ label: `${item.name}(${item.channel_id})`, value: item.channel_id }))
      }
      this.channelOptions = this.permission_projectList
    })
  },
  methods: {
    /** 重置按钮操作 */
    resetQuery () {
      this.dateRange = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleQuery () {
      this.page = 1
      this.getList()
    },
    getList () {
      const params = Object.assign({}, this.queryParams)
      if (params.amount_start) params.amount_start = params.amount_start * 100
      if (params.amount_stop) params.amount_stop = params.amount_stop * 100
      this.loading = true
      getCouponList(params).then(res => {
        const data = res.data || {}
        this.dataList = data.list || []
        this.total = data.count
      }).finally(() => {
        this.loading = false
      })
    },
    handleAdd () {
      this.isDetail = false
      this.detailObj = {}
      this.detailDialogShow = true
    },
    handleEdit (row) {
      this.isDetail = false
      this.detailObj = row
      this.detailDialogShow = true
    },
    handleRecord (row) {
      this.$router.push({
        name: 'CouponReport',
        params: {
          coupon_id: row.id
        },
        query: {
          st: row.created_at,
          et: row.stop_at
          // merchant_id: this.$store.getters['zcsd-core/checkProject'].merchant_id
        }
      })
    },
    handleState (row, status) {
      this.$confirm(`是否确认${status === 2 ? '停止' : '上架'}该优惠券？优惠券名：${row.name}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateCouponStatus({ status, id: row.id }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.getList()
        })
      })
    },
    handleDetail (row) {
      this.detailObj = row
      this.isDetail = true
      this.detailDialogShow = true
    },
    handleDel (row) {
      this.$confirm(`是否确认删除该优惠券？优惠券名：${row.name}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delCoupon({ id: row.id }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
      })
    }
  }
}
</script>
